<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分销佣金管理系统</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
    .filter-bar { margin-bottom: 20px; display: flex; gap: 15px; flex-wrap: wrap; }
    .chart-container { height: 400px; margin-bottom: 30px; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; }
    .stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
    .stat-card { background: #f5f7fa; padding: 20px; border-radius: 8px; text-align: center; }
    .stat-value { font-size: 24px; font-weight: bold; color: #409EFF; }
    .stat-label { color: #909399; margin-top: 5px; }
  </style>
</head>
<body>
<div class="container">
  <h1>分销佣金数据分析</h1>

  <!-- 统计卡片 -->
  <div class="stats-cards" id="statsCards">
    <div class="stat-card">
      <div class="stat-value" id="totalCommission">0</div>
      <div class="stat-label">总佣金</div>
    </div>
    <div class="stat-card">
      <div class="stat-value" id="totalOrders">0</div>
      <div class="stat-label">总订单数</div>
    </div>
    <div class="stat-card">
      <div class="stat-value" id="todayCommission">0</div>
      <div class="stat-label">今日佣金</div>
    </div>
  </div>

  <!-- 筛选条件 -->
  <div class="filter-bar">
    <select id="chartType">
      <option value="daily">每日趋势</option>
      <option value="weekly">每周趋势</option>
      <option value="monthly">每月趋势</option>
    </select>

    <input type="date" id="startDate">
    <input type="date" id="endDate">

    <select id="levelFilter">
      <option value="0">所有级别</option>
      <option value="1">一级分销</option>
      <option value="2">二级分销</option>
    </select>

    <button onclick="loadChartData()">生成图表</button>
  </div>

  <!-- 图表容器 -->
  <div id="chartContainer" class="chart-container"></div>

  <!-- 数据表格 -->
  <h2>佣金明细</h2>
  <table border="1" style="width: 100%; border-collapse: collapse;">
    <thead>
    <tr>
      <th>订单号</th>
      <th>订单金额</th>
      <th>佣金金额</th>
      <th>分销级别</th>
      <th>状态</th>
      <th>时间</th>
    </tr>
    </thead>
    <tbody id="commissionList"></tbody>
  </table>
</div>

<script>
  let chartInstance = null;

  // 初始化页面
  async function initPage() {
    initDatePickers();
    await loadStats();
    await loadChartData();
    await loadCommissionList();
  }

  // 加载统计信息
  async function loadStats() {
    try {
      const response = await fetch('/api/commission/stats');
      const data = await response.json();

      document.getElementById('totalCommission').textContent = '¥' + data.total_commission.toFixed(2);
      document.getElementById('totalOrders').textContent = data.total_orders;
      document.getElementById('todayCommission').textContent = '¥' + data.today_commission.toFixed(2);
    } catch (error) {
      console.error('加载统计信息失败:', error);
    }
  }

  // 加载图表数据
  async function loadChartData() {
    const type = document.getElementById('chartType').value;
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    const level = document.getElementById('levelFilter').value;

    const params = new URLSearchParams({
      type: type,
      start_date: startDate,
      end_date: endDate,
      level: level
    });

    try {
      const response = await fetch(`/api/commission/chart?${params}`);
      const data = await response.json();

      if (data.success) {
        renderChart(data);
      }
    } catch (error) {
      console.error('加载图表数据失败:', error);
    }
  }

  // 渲染图表
  function renderChart(chartData) {
    const chartDom = document.getElementById('chartContainer');
    chartInstance = echarts.init(chartDom);

    const option = {
      title: { text: chartData.title, left: 'center' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: chartData.dataPoints.map(item => item.date) },
      yAxis: { type: 'value', name: chartData.yAxisName },
      series: [{
        data: chartData.dataPoints.map(item => item.value),
        type: 'line',
        smooth: true,
        areaStyle: {}
      }]
    };

    chartInstance.setOption(option);
  }

  // 初始化日期选择器
  function initDatePickers() {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setDate(endDate.getDate() - 30);

    document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
    document.getElementById('endDate').value = endDate.toISOString().split('T')[0];
  }

  // 页面加载时初始化
  document.addEventListener('DOMContentLoaded', initPage);
</script>
</body>
</html>